<template>
    <el-dialog :title="title" :visible.sync="open" width="80%" :close-on-click-modal="false" append-to-body
               :before-close="cancel">
        <el-table v-loading="loading" ref="table" :data="tableData.list">
            <el-table-column type="index" label="序号" width="55" align="center"/>
            <el-table-column label="日期" align="center" prop="date"/>
            <el-table-column label="总点击数" align="center" prop="clickTotal"/>
            <el-table-column label="成功点击数" align="center" prop="clickSuccess" width="300"/>
            <el-table-column label="失败点击数" align="center" prop="clickError" width="150"/>
            <el-table-column label="回调数" align="center" prop="callbackTotal" width="150"/>
        </el-table>
    </el-dialog>
</template>

<script>
import {clickOnTheSplitFace} from "@/api/business/juheAdmin";

export default {
    name: "reportDetail",
    props: {
        open: {
            type: Boolean
        },
        channelId: {
            type: [String, Number]
        }
    },
    data() {
        return {
            title: '上报详情',
            loading: false,
            tableData: {
                list: [],
            },
        }
    },
    watch: {
        channelId: {
            handler(newName, oldName) {
                if(this.channelId){
                    this.getList()
                }
            },
            immediate: true,
        }
    },
    methods: {
        getList() {
            this.loading = true
            clickOnTheSplitFace({
                id: this.channelId
            }).then(response => {
                if (response.data) {
                    this.tableData.list = response.data.list;
                }
                this.loading = false;
            });
        },
        cancel() {
            this.$emit('update:open', false)
        }
    }
}
</script>

<style scoped>

</style>
